<template>
  <header style="display:flex;">
    <div class="name">
      后台管理系统
    </div>
    <div class="tabBox">
      <div
        class="ming"
        :class="{'active':tabName == item.id}"
        v-for="item in tabList"
        :key="item.id"
        :ceshi="abc"
        @click="tabClick(item)"
      >{{item.name}}</div>
    </div>
  </header>
</template>
<script>
export default {
  name: 'CommonHeader',
  data() {
    return {
      abc:'',
      tabName: '',
      activeName: 'second',
      tabList: [
        {
          id: 0,
          name: '人力资源'
        },
        {
          id: 1,
          name: '财务'
        },
        {
          id: 2,
          name: '新零售'
        },
        {
          id: 3,
          name: '企划中心'
        },
        {
          id: 4,
          name: '商品中心'
        },
        {
          id: 5,
          name: '生鲜大客户'
        },
        {
          id: 6,
          name: '大渠道'
        },
        {
          id: 7,
          name: '外贸中心'
        },
        {
          id: 8,
          name: '仓库中心'
        },
        {
          id: 9,
          name: '客服中心'
        },
        {
          id: 10,
          name: '技术中心'
        }
      ]
    }
  },
  created() {

  },
  methods: {
    tabClick(item) {
      this.tabName = item.id
      this.abc = item.id
    }
  }
}
</script>
<style lang="scss" scoped>
.name {
  width: 170px;
  font-size: 22px;
  color: white;
  font-weight: bold;
  margin-top: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}
.tabBox {
  margin-top: 22px;
  margin-left: 20px;
  display: flex;
}
.ming {
  font-size: 16px;
  color: #ccc;
  margin-left: 10px;
  margin-right: 10px;
}
.active {
  color: #fff;
  font-weight: bold;
}
</style>